import React, { Component, Fragment } from 'react'
import { connect } from 'react-redux'
import { Button } from 'antd'
import {
  ACTION_CHANGE_VALUE,
  ACTION_CLICK_CHANGE,
} from '../../store/actioncreaters'
import api from '../../api/request'
class Testredux extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: '测试',
    }
  }
  componentDidMount() {
    api
      .get(
        'https://www.easy-mock.com/mock/5d6f1cb10fc4885cad9aa1cc/api/table/test222'
      )
      .then((res) => {
        console.log(res)
      })
      .catch((res) => {
        console.log(res)
      })
  }
  render() {
    const { inputValue, handleChange, handleClick } = this.props
    return (
      <Fragment>
        <div>
          <input type="text" value={inputValue} onChange={handleChange}></input>
          <Button onClick={handleClick} type="primary">
            {' '}
            提交
          </Button>
        </div>
      </Fragment>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    inputValue: state.inputValue,
    list: state.list,
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    handleChange(e) {
      let value = e.target.value
      const action = ACTION_CHANGE_VALUE(value)
      dispatch(action)
    },
    handleClick() {
      const action = ACTION_CLICK_CHANGE()
      dispatch(action)
    },
  }
}
//最后利用store挂钩

export default connect(
  mapStateToProps, //这里面放的是数据
  mapDispatchToProps //里面放的是操作的数据的方法
)(Testredux)
